<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>祥利百悦</title>
	<link rel="stylesheet" href="../../css/bootstrap.min.css" />
	<link rel="stylesheet" href="../../css/common.css" />
	<link rel="stylesheet" href="../../css/welcome.css" />
</head>
<body>
<!-- 弹框开始  -->
<div class="zhy_zhezhao_pop" style="display: none;"></div>
<!-- 删除服务站确认弹窗 -->
<div class="zhy_popa yebz_pop " style="width: 450px;margin-left: -225px;">
	<p class="color66"><span class="pull-right close_icon" onclick="hidePop()"></span></p>
	<div class="pop_content">
		<p class="red_tip">您确定要删除<span id="svcStNm"></span>服务站吗？</p>
		<div class="operate_btn pull-right">
			<button type="button" class="btn cancle_yes" >确定</button>
			<button type="button" class="btn cancel" onclick="hidePop()">取消</button>
		</div>
	</div>
</div>

<!--返回列表弹出弹出-->
<div class="zhy_popa gobackpop ">
	<p class="color66">温馨提示</p>
	<div class="pop_content">
		<p>是否保存当前页面已填写的内容？</p>
		<div class="operate_btn pull-right">
			<button type="button" class="btn cancle_yes" onclick="createStation()">保存</button>
			<button type="button" class="btn cancle_btn" onclick="hidePop('/cloud-statistics/station/displaypage/main?val=1')">不保存</button>
		</div>
	</div>
</div>
<!--弹框结束-->

<div class="main_content create_site">
	<div class="div_bordered">
		<div class="panel panel-default choose_block">
			<div class="fixed_top panel panel-default choose_block">
				<div class="panel-heading color333 ">创建服务站
					<button type="button" class="btn btn_save2 pull-right" style="width: 76px;">确认添加</button>
				</div>
			</div>
			<div class="panel-heading color333">创建服务站
				<a class="btn btn_blueg2 pull-right" href="serviceStationList.jsp"  >&lt;服务站列表</a>
			</div>
			<div class="divider"> </div>
			<div class="site_block" id="site_block1">
				<div class="well_head bgf2f2f2 " id="station1" >服务站一</div>
				<div class="panel-body">
					<form class="form-horizontal" role="form" id="form-horizontal1">
						<div class="form-group">
							<label for="" class="pull-left control-label">服务站名称：</label>
							<div class="pull-left">
								<input type="text" class="form-control input300 validate[required,maxSize[30],funcCall[validateStationName]]" name="serverStationName" placeholder="请输入服务站名称"/><em class="colorred">*</em>
							</div>
							<!-- 名称错误提示 -->
							<div  style="display: none" class="stationNameError"><img src="${res_uri }/img/error_sm.png" class="formErrorImg" />此服务站名称已存在</div>
						</div>
						<div class="form-group">
							<label for="" class="pull-left control-label">所属地区：</label>
							<div class="pull-left">
								<div id="jsAddress_1"  class="selectbox_s">
									<input type="hidden" class="province" value="-1"/>
									<input type="hidden" class="city" value="-1"/>
									<input type="hidden" class="area" value="-1"/>
									<input id="" type="hidden" class="form-control" name="provinceName" value="" />
									<input id="" type="hidden" class="form-control" name="cityName" value=""/>
									<input id="" type="hidden" class="form-control" name="areaName" value="" />
									<div name="province" type="selectbox"  class="btn-group inline "></div>
									<div name="city" type="selectbox"  class="btn-group inline"></div>
									<div name="area" type="selectbox"  class="btn-group inline"></div>
								</div>
								<div class=" inline">
									<input type="text" class="form-control input300 validate[required,maxSize[20]]" name="address" placeholder="详细地址"/>
									<em class="colorred">*</em>
									<!-- 地区错误提示 -->
									<div class="areaError" style="display: none;float: right"><img src="${res_uri }/img/error_sm.png" class="formErrorImg" />请输入所属地区</div>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label for="" class="pull-left control-label">联系电话：</label>
							<!-- <div class="pull-left"> -->
							<input type="text" class="form-control inline validate[required,custom[mobilephone]]" name="phone" style="width: 310px;" placeholder="请输入手机号码或座机，例：010-66668888" />
							<em class="colorred">*</em>
							<!-- </div> -->
						</div>
					</form>
				</div>
			</div>
			<c:if test="${1 < bizMaxStCount}">
				<button class="btn_white site_add" onclick="site_add_new(this)"><i></i>继续添加</button>
			</c:if>
			<div style="height: 50px;"></div>

			<div class="form-group text-center">
				<div class="divider mt5"> </div>
				<button type="submit" class="btn  btn_green" id="create_station" onclick="createStation()">完成创建</button>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="../..//js/jquery-1.8.3.min.js" ></script>
<!--表单验证 s-->
<script type="text/javascript" src="../../js/jquery.validationEngine-zh_CN.js" ></script>

<script type="text/javascript" src="../../js/jquery.validationEngine.js" ></script>
<!-- 省市区联动 s -->
<script type="text/javascript" src="../..//js/jquery.ganged.js" ></script>
<script type="text/javascript" src="../..//js/pro.js"></script><!--  省市区的json数据 -->
<!-- 省市区联动 e -->
<script type="text/javascript" src="../..//js/ToConvtZH.js"></script><!-- 数字转化成中文 -->
<script src="../..//js/common.js"></script>
<script type="text/javascript">
    /****
     ***
     省市区联动 调用
     */
    $("[id^='jsAddress']").ganged({'data': provinceList, 'width': 111, 'height': 32});
    //****表单验证 ******
    $(".form-horizontal").validationEngine();
    var num = 2;
    function delThisSt(obj){
        //修改已添加服务站的编号
        var stIndex = $(obj).parents(".well_head").attr("id");
        var leftSts = $(obj).parents(".site_block").nextAll(".site_block");
        $.each(leftSts, function(idx, curObj){
            var divId = $(curObj).attr("id");//site_block3
            var idNum = parseInt(divId.substring(10, divId.length));//当前站点form 的 id序号
            var fixNum = idNum - 1;
            //修改div 下id
            $("#site_block"+idNum).attr("id","site_block"+fixNum);
            $("#form-horizontal"+idNum).attr("id","form-horizontal"+fixNum);
            $("#jsAddress_"+idNum).attr("id","jsAddress_"+fixNum);
            $("#station"+idNum).attr("id","station"+fixNum).html("服务站"+ToConvtZH(fixNum)).append("<div class='colorred delete pull-right mr15' onclick='delThisSt(this)'>删除</div>");
        });
        num = num - 1;
        $(obj).parents(".site_block").remove();
    }

    function delEditSt(obj,className,id){
        //修改已添加服务站的编号
        $(".zhy_zhezhao_pop").show();
        var top = document.body.scrollTop||document.documentElement.scrollTop;
        var this_h = $("." + className).height();
        var win_h = ($('html',parent.document).height()-this_h-100)/2
        $(".zhy_zhezhao_pop").height($("html").height());
        var this_h = $("." + className).height();
        top= top +win_h;
        $("." + className).css("top", top).show().siblings(".zhy_popa").hide();

    }

    // 隐藏修改弹框
    function hidePop(url) {
        $(".zhy_zhezhao_pop").hide();
        $(".zhy_popa").hide();
        if(url){
            window.location.href = url;
        }
    }

    //校验服务站名称
    function validateStationName(field, rules, i, options){
        var stationName=field.context.value;
        var reg = /^(\w|[\u4E00-\u9FA5])*$/;
        if(arr=stationName.match(reg))
        {
            return true;
        }else{
            return "只能输入数字,英文字符,汉字";
        }
    }
    var leftCount = 10;//企业可创建服务站的数量
    function site_add_new(_this) {

        if (leftCount < num){
            zhyAlert("您的服务站创建权限已用完，如需创建更多服务站，请前往“官方应用”->“应用中心”中购买",true);
            return;
        }
        //检查当前服务站信息是否完整,如果信息有错误不能再添加
        /*if (num == 2){
            if(!$(_this).prev().find("form").validationEngine("validate")) return ;
        }*/
        var idName="form-horizontal"+(num-1);
        $("#"+idName).validationEngine({promptPosition: "inline"});
        if(!$("#"+idName).validationEngine('validate')) return false ;
        //
        /*$(_this).prev().find("form").find("input").each(function(i,_input){
            $(_input).blur();
        });*/

        var str ='<div class="site_block " id="site_block'+num+'">'+
            '<div class="well_head mt0 bgf2f2f2" id="station'+num+'">服务站' + ToConvtZH(num) + '<div class="colorred delete pull-right mr15" onclick="delThisSt(this)">删除</div></div>' +
            '<div class="panel-body">' +
            '<form class="form-horizontal" role="form" id="form-horizontal'+num+'">'+
            '<div class="form-group">' +
            '<label for="" class="pull-left control-label">服务站名称：</label>' +
            '<div class="pull-left">' +
            '<input type="text" class="form-control input300 validate[required,maxSize[30],funcCall[validateStationName]]" id="" name="serverStationName" placeholder="请输入服务站名称"><em class="colorred">*</em>' +
            '</div>' +
            '<div  style="display: none" class="stationNameError"><img src="${res_uri }/img/error_sm.png" class="formErrorImg" />此服务站名称已存在</div>'+
            '</div>' +
            '<div class="form-group">' +
            '<label for="" class="pull-left control-label">所属地区：</label>' +
            '<div class="pull-left">' +
            '<div id="jsAddress_'+num+'"  class="selectbox_s">'+
            '<input type="hidden" class="province" value="-1"/>'+
            '<input type="hidden" class="city" value="-1"/>'+
            '<input type="hidden" class="area" value="-1"/>'+
            '<input id="" type="hidden" class="form-control" name="provinceName" value="" >'+
            '<input id="" type="hidden" class="form-control" name="cityName" value="">'+
            '<input id="" type="hidden" class="form-control" name="areaName" value="" >'+
            '<div name="province" type="selectbox"  class="btn-group inline "></div>'+
            '<div name="city" type="selectbox"  class="btn-group inline"></div>'+
            '<div name="area" type="selectbox"  class="btn-group inline"></div>'+
            '</div>'+
            '<div class=" inline">'+
            '<input type="text" class="form-control input300 validate[required,maxSize[20]]" id="" name="address" placeholder="详细地址" ><em class="colorred">*</em>'+
            '<div class="areaError" style="display: none;float: right"><img src="${res_uri }/img/error_sm.png" class="formErrorImg" />请输入所属地区</div>'+
            '</div>'+
            '</div>' +
            '</div>' +
            '<div class="form-group">' +
            '<label for="" class="pull-left control-label">联系电话：</label>' +
            '<div class="pull-left">' +
            '<input type="text" class="form-control inline validate[required,custom[mobilephone]]" id="" name="phone" style="width: 310px;" placeholder="请输入手机号码或座机，例：010-66668888" ><em class="colorred">*</em>' +
            '</div>' +
            '</div>' +
            '</form>'+
            '</div>' +
            '</div>';

        $(".site_add").before(str);
        $("#jsAddress_"+num).ganged({'data': provinceList, 'width': 111, 'height': 32});
        $("#form-horizontal"+num).validationEngine({promptPosition: "inline"});
        //alert("#form-horizontal"+num)
        num=num+1;

    }
    //离开,取消错误提示
    $("input[name='serverStationName']").blur(function(){
        $(".stationNameError").css("display","none");
    });
    //创建服务站点
    function createStation() {
        hidePop();
        $('#create_station').attr('disabled',"true");
        if(!$(".form-horizontal").validationEngine("validate")) {
            $('#create_station').removeAttr("disabled");
            return ;
        }
        //提交创建
        //获取创建的每个站点的省，市，街名
        var createStationNum = $(".site_block").length;
        for(var i=0;i<createStationNum;i++){
            provinceName = $('div[name="province"] select').eq(i).find("option:selected").text() == '请选择' ? null : $('div[name="province"] select').eq(i).find("option:selected").text();
            cityName = $('div[name="city"] select').eq(i).find("option:selected").text() == '请选择' ? null :$('div[name="city"] select').eq(i).find("option:selected").text();
            areaName = $('div[name="area"] select').eq(i).find("option:selected").text() == '请选择' ? null :$('div[name="area"] select').eq(i).find("option:selected").text();
            //var address=$("input[name='address']").val();
            if(areaName==null){
                $(".areaError").eq(i).css("display","");
                $('#create_station').removeAttr("disabled");
                return;
            }else{
                $(".areaError").eq(i).css("display","none");
            }
            $("input[name='provinceName']").eq(i).val(provinceName);
            $("input[name='cityName']").eq(i).val(cityName);
            $("input[name='areaName']").eq(i).val(areaName);
        }
        var jsonStr = $("form").serializeJson();
        $.ajax({
            type : "post",
            dataType : "json",
            contentType : "application/json",
            url : "${ctx}/station/addstation",
            async : true,
            data : jsonStr,
            success : function(data) {
                if(data.resultCode=="SUCC"){
                    //alert("保存成功");
                    window.location.href = "/cloud-statistics/station/displaypage/main?val=1";
                }else{
                    $(".stationNameError").css("display","none");
                    $('#create_station').removeAttr("disabled");
                    if(data.failureCode=="max"){
                        zhyAlert("您的服务站创建权限已用完，如需创建更多服务站，请前往“官方应用”->“应用中心”中购买",true);
                    }else if(data.failureCode=="repeat"){
                        $(".stationNameError").eq(data.failureMessage).css("display","");
                    }else{
                        zhyAlert("保存失败");
                    }
                }
            }
        });
    };

    (function($){
        $.fn.serializeJson = function(){
            var jsonData1 = {};
            var serializeArray = this.serializeArray();
            // 先转换成{"id": ["12","14"], "name": ["aaa","bbb"], "pwd":["pwd1","pwd2"]}这种形式
            $(serializeArray).each(function () {
                if (jsonData1[this.name]) {
                    if ($.isArray(jsonData1[this.name])) {
                        jsonData1[this.name].push(this.value);
                    } else {
                        jsonData1[this.name] = [jsonData1[this.name], this.value];
                    }
                } else {
                    jsonData1[this.name] = this.value;
                }
            });
            // 再转成[{"id": "12", "name": "aaa", "pwd":"pwd1"},{"id": "14", "name": "bb", "pwd":"pwd2"}]的形式
            var vCount = 0;
            // 计算json内部的数组最大长度
            for(var item in jsonData1){
                var tmp = $.isArray(jsonData1[item]) ? jsonData1[item].length : 1;
                vCount = (tmp > vCount) ? tmp : vCount;
            }

            if(vCount > 1) {
                var jsonData2 = new Array();
                for(var i = 0; i < vCount; i++){
                    var jsonObj = {};
                    for(var item in jsonData1) {
                        jsonObj[item] = jsonData1[item][i];
                    }
                    jsonData2.push(jsonObj);
                }
                return JSON.stringify(jsonData2);
            }else{
                return "[" + JSON.stringify(jsonData1) + "]";
            }
        };
    })(jQuery);
</script>
</body>